
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">同城酒店</h1>
		</header>
		<div class="tab-bar">
			<a class="tab-bar-item" href="a.html">
				<img src="./images/tabIcon1.png" alt="">
				<div style="font-size: 11px;">推荐</div>
			</a>
			<a class="tab-bar-item">
				<img src="./images/tabIcon2.png" alt="">
				<div style="font-size: 11px;">领券中心</div>
			</a>
			<a class="tab-bar-item">
				<img src="./images/tabIcon3.png" alt="">
				<div style="font-size: 11px;">我的订单</div>
			</a>
			<a class="tab-bar-item">
				<img src="./images/tabIcon4.png" alt="">
				<div style="font-size: 11px;">更多</div>
			</a>
		</div>
		<div class="mui-content">
			<div id="tabbar">
				<div id="slider" class="mui-slider">
					<!-- swiperImage -->
					<div id="son" class="mui-slider-group mui-slider-loop"></div>
					<!-- swiperDots -->
					<div id="dots" class="mui-slider-indicator"></div>
				</div>
				<div id="chooseArea" class="choose-area">
					<div id="bottomTab" class="bottom-tab">
						<div id="bottomTab1" class="bottom-tab-flex bottom-tab-active">
							<span class="">国内</span>
						</div>
						<div id="bottomTab2" class="bottom-tab-flex">
							<span class="">国外</span>
						</div>
						<div id="bottomTab3" class="bottom-tab-flex">
							<span class="">钟点房</span>
						</div>
						<div id="bottomTab4" class="bottom-tab-flex">
							<span class="">民宿公寓</span>
						</div>
					</div>
					<!-- 国内 -->
					<div id="domestic" class="mui-control-content mui-active">
						<div class="form-item">
							<div id="city1" style="width: 200px;" class="form-area-date">
								北京
							</div>
							<div id="city1Position" style="display:flex">
								<div style="transform: rotate(-90deg)">
									<img src="./images/arrow.png" style="width: 14px;height: 14px">
								</div>
								<div class="flex-column-align-center">
									<img class="position-icon" src="./images/position_icon.png" alt="">
									<div style="font-size: 10px;">我的位置</div>
								</div>
							</div>

						</div>
						<div onclick="showDataPicker()" class="form-item">
							<div style="display: flex;align-items: center">
								<div id="date1" class="form-area-date">
									01月09日
									<span style="font-size: 10px">今天</span>
								</div>
								<div style="margin: 0 4px;">-</div>
								<div id="date2" class="form-area-date">
									01月13日
									<span style="font-size: 10px">明天</span>
								</div>
							</div>
							
							<div id="totolDayNum" style="font-size: 12px;display: flex;">
								共一晚
								<div style="transform: rotate(-90deg);margin-left: 6px;">
									<img src="./images/arrow.png" style="width: 14px;height: 14px">
								</div>
							</div>
						</div>
						<div class="form-item">
							<input readonly id="positionHotelInput" type="text" placeholder="地点/品牌/酒店名称">
							<div style="transform: rotate(-90deg)">
								<img src="./images/arrow.png" style="width: 14px;height: 14px">
							</div>
						</div>
						<div class="form-item">
							<input readonly id="priceStarsInput" type="text" placeholder="价格/星级">
							<div style="transform: rotate(-90deg)">
								<img src="./images/arrow.png" style="width: 14px;height: 14px">
							</div>
						</div>
						<!-- 这里是国内按钮区域 -->
						<div id="buttonArea" class="button-area">
							<button id="button1" class="button1">查询酒店</button>
						</div>

					</div>
					<!-- 国外 -->
					<div id="abroad" class="mui-control-content">
						<!-- <div class="form-item">
							<div id="foreignCity1" class="form-area-date">
								北京
							</div>
							<div id="plane2" class="plane-icon">
								<img src="./images/plane.png" style="width:30px;height:30px;" alt="">
							</div>
							<div id="foreignCity2" class="form-area-date">
								曼谷
							</div>
						</div>
						<div class="form-item">
							<div id="foreignDate1" class="form-area-date">
								01月09日
							</div>

							<div id="foreignDate2" class="form-area-date">
								01月13日
							</div>
						</div>
						<div id="radioArea" class="radio-area">
							<div id="seatArea" class="seat-area">
								<div class="seat-active">经济舱</div>
								<div class="seat-noActive">公务/头等舱</div>
							</div>
							<div id="withBaby" class="with-baby">
								<img src="./images/!.png" style="width: 14px;height: 14px" alt="">
								<div id="baby" style="font-size: 10px;margin:0 5px">不带婴儿、儿童</div>
								<img src="./images/arrow.png" style="width: 14px;height: 14px">
							</div>
						</div>
						 这里是国内按钮区域 
						<div id="buttonArea" class="button-area">
							<button id="button2" class="button1">查询酒店</button>
						</div> -->
					</div>
					<!-- 特价机票 -->
					<div id="specialOffer" class="mui-control-content ">
					<!-- 	<div style="display: flex;align-items: center;">
							<div>
								<div class="flex-center">
									<div style="color: green;margin-left: 10px;">o</div>
									<div id="specialCity1" class="form-item"
										style="width: 281px;color: #000000;font-weight: bold">上海
									</div>
								</div>
								<div class="flex-center">
									<div style="color: red;margin-left: 10px;">o</div>
									<div id="specialCity2" class="form-item"
										style="width: 281px;color: #000000;font-weight: bold">北京
									</div>
								</div>
							</div>
							<div id="plane3">
								<img src="./images/atob.png"
									style="width: 20px;height: 20px;flex-shrink: 0;transform:rotate(90deg);margin-left: -10px;"
									alt="">
							</div>
						</div>
						<div class="special-future"><img src="./images/clock.png"
								style="width: 10px;height: 10px;margin-right: 6px" />未来两周</div>
						<div id="buttonArea" class="button-area">
							<button id="button3" class="button1">特价查询</button>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<!-- 这个是星级价格 -->
		<div id="priceStarsPop" style="height: 50%;margin-left: -10px;overflow-y: scroll;"
			class="mui-popover mui-popover-action mui-popover-bottom">
			<div id="citysPopArea" class="citys-pop-area">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="citysPopArea" class="citys-pop-area">
							<div class="pop-title">
								<img onclick="closePriceStarsPop()" id="close" style="width: 14px;height: 14px;"
									src="./images/close.png" alt="">
								<div>选择出发地</div>
								<div></div>
							</div>
							<div>
								<p class="title">星级(可多选)</p>
								<div id="stars" style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">不限</div>
									<div class="city-item">经济</div>
									<div class="city-item">三星/舒适</div>
									<div class="city-item">四星/高档</div>
									<div class="city-item">五星/豪华</div>
								</div>
							</div>
							<div>
								<p class="title">价格</p>
								<div id="price" style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">不限</div>
									<div class="city-item">￥0-100</div>
									<div class="city-item">￥100-300</div>
									<div class="city-item">￥300-400</div>
									<div class="city-item">￥400-550</div>
									<div class="city-item">￥550-700</div>
									<div class="city-item">￥700以上</div>
								</div>
							</div>
							<div id="popButtonArea" style="margin-top: 100px;" class="button-area">
								<button id="popButton" class="button1">确定</button>
							</div>
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
		</div>
		<div id="citysPop" style="height: 70%;margin-left: -10px;overflow-y: scroll; background-color:#fff"
			class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div id="citysPopArea" class="citys-pop-area">
						<div class="pop-title">
							<img onclick="closePop()" id="close" style="width: 14px;height: 14px;"
								src="./images/close.png" alt="">
							<div>选择出发地</div>
							<div></div>
						</div>
						<!-- input区域 -->
						<div class="input-area" onclick="inputBlur()"><img
								style="position: absolute;left: 25px;top: 10px; width: 12px;height: 12px;"
								src="./images/searchIcon.png" alt=""> <input id="searchCity" class="input-style"
								type="text" placeholder="国内城市/区域/景点"></div>
						<div>
							<p class="title">当前位置</p>
							<div style="display: flex;margin-left: 10px;align-items: center;font-size: 10px">
								<img class="pop-position-icon" src="./images/position_icon.png" alt="">
								<div>西安</div>
							</div>
							<div style="display: flex;flex-flow: wrap;width: 100%;">
								<div class="city-item">成都</div>
								<div class="city-item">四川</div>
								<div class="city-item">北京</div>
								<div class="city-item">西安</div>
								<div class="city-item">辽宁</div>
								<div class="city-item">沈阳</div>
								<div class="city-item">重庆</div>
							</div>
						</div>
						<div>
							<p class="title">历史搜索</p>
							<div style="display: flex;flex-flow: wrap;width: 100%;">
								<div class="city-item">成都</div>
								<div class="city-item">四川</div>
								<div class="city-item">北京</div>
								<div class="city-item">西安</div>
								<div class="city-item">辽宁</div>
								<div class="city-item">沈阳</div>
								<div class="city-item">重庆</div>
							</div>
						</div>
						<div>
							<p class="title">热门城市</p>
							<div style="display: flex;flex-flow: wrap;width: 100%;">
								<div class="city-item">成都</div>
								<div class="city-item">四川</div>
								<div class="city-item">北京</div>
								<div class="city-item">西安</div>
								<div class="city-item">辽宁</div>
								<div class="city-item">沈阳</div>
								<div class="city-item">重庆</div>
							</div>
						</div>
						<div style="margin-bottom: 100px;">
							<div>
								<p class="title">A</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">B</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">C</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">D</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">E</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">F</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
							<div>
								<p class="title">G</p>
								<div style="display: flex;flex-flow: wrap;width: 100%;">
									<div class="city-item">成都</div>
									<div class="city-item">四川</div>
									<div class="city-item">北京</div>
									<div class="city-item">西安</div>
									<div class="city-item">辽宁</div>
									<div class="city-item">沈阳</div>
									<div class="city-item">重庆</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 这个是搜索框的弹窗 -->
		<div id="citysSearchPop" style="height: 70%;margin-left: -10px;overflow-y: scroll;"
			class="mui-popover mui-popover-action mui-popover-bottom">
			<div id="citysPopArea" class="citys-pop-area">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="pop-title">
							<img onclick="closePop()" id="close" style="width: 14px;height: 14px;"
								src="./images/close.png" alt="">
							<div>选择出发地</div>
							<div></div>
						</div>
						<!-- input区域 -->
						<div class="input-area">
							<img style="position: absolute;left: 20px;top: 10px; width: 12px;height: 12px;"
								src="./images/searchIcon.png" alt=""> <input oninput="inputSearch()" id="searchCity"
								class="input-search-style" type="text" placeholder="国内城市/区域/景点">
							<div class="cancel" onclick="closeSearchPop()" style="font-size:15px;line-height: 31px;">取消
							</div>
						</div>
						<div id="searchArea" onclick="searchChooseCity()" style="display: none;">
							<div class="search-item">
								<div style="display: flex;align-items: center;">
									<div
										style="line-height: 14px; height:14px ;font-size: 10px;color: #ffffff;background-color: #63d188;">
										城市</div>
									<div id="city" style="color: #3333333;font-size: 14px;margin-left: 8px;">西安</div>
								</div>
								<div style="color: gray;font-size: 10px;">陕西省</div>
							</div>
						</div>
					</div>
				</div>
			</div>


		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.min.js"></script>
	<script src="js/jquery-3.5.1.min.js"></script>
	<script>
		var swiperImgs = [{
				image: './images/yuantiao.jpg',
				href: '#'
			}, {
				image: './images/shuijiao.jpg',
				href: '#'
			},
			{
				image: './images/muwu.jpg',
				href: '#'
			},
			{
				image: './images/cbd.jpg',
				href: '#'
			},
			{
				image: './images/yuantiao.jpg',
				href: '#'
			},
			{
				image: './images/shuijiao.jpg',
				href: '#'
			}, //这个轮播数据，第一张和最后一张分别是，后端拿到的数据的最后一张和第一张加上去的
		]
		var cityFlag = ""
		var dateFlag = ""
		//下面是处理轮播的显示
		swiperImgs.forEach((item, index) => {
			if (index == 0) {
				let str = $(`<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="${item.href}">
								<img src="${item.image}">
							</a>
						</div>`)
				$('#slider > #son').append(str)

			} else if (index == swiperImgs.length - 1) {
				let str = $(`<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="${item.href}">
								<img src="${item.image}">
							</a>
						</div>`)
				$('#slider > #son').append(str)

			} else {
				let str = $(`<div class="mui-slider-item">
							<a href="${item.href}">
								<img src="${item.image}">
							</a>
						</div>`)
				$('#slider > #son').append(str)
				let dot = ''
				//这里是轮播的标点
				if (index == 1) {
					dot = $('<div class="mui-indicator mui-active"></div>')
					console.log(dot);
					$('#dots').append(dot)
				} else {
					dot = $('<div class="mui-indicator"></div>')
					$('#dots').append(dot)
				}
			}
		})
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		(function($) {
			$(".mui-scroll-wrapper").scroll({
				bounce: false, //滚动条是否有弹力默认是true
				indicators: false, //是否显示滚动条,默认是true
			});
		})(mui);
		var slider = mui("#slider");
		slider.slider({
			interval: 5000
		});
		// 国内 国际 特价机票 tab栏切换
		$('#bottomTab div').on('click', function() {
			$('.bottom-tab-flex').removeClass('bottom-tab-active');
			// 在点击的子元素上添加 bottom-tab-active 类
			$(this).addClass('bottom-tab-active');
			// $('.mui-control-content').eq($(this).index()).show().siblings('.mui-control-content').hide();
		});

		mui('body').on('shown', '.mui-popover', function(e) {
			console.log('shown', e.detail.id); //detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			console.log('hidden', e.detail.id); //detail为当前popover元素
		});
		// 下面这些是呼出省的弹窗
		$("#city1").on('click', function() {
			cityFlag = 'city1'
			mui('#citysPop').popover('toggle');
		})
		$("#city1Position").on('click', function() {
			cityFlag = 'city1'
			mui('#citysPop').popover('toggle');
		})

		$("#positionHotelInput").on('click', function() {
			cityFlag = 'positionHotelInput'
			mui('#citysPop').popover('toggle');
		})
		$("#priceStarsInput").on('click', function() {
			cityFlag = 'priceStarsInput'
			mui('#priceStarsPop').popover('toggle');
		})




		$("#city2").on('click', function() {
			cityFlag = 'city2'
			mui('#citysPop').popover('toggle');
		})
		$("#foreignCity1").on('click', function() {
			cityFlag = 'foreignCity1'
			mui('#citysPop').popover('toggle');
		})
		$("#foreignCity2").on('click', function() {
			cityFlag = 'foreignCity2'
			mui('#citysPop').popover('toggle');
		})
		$("#specialCity1").on('click', function() {
			cityFlag = 'specialCity1'
			mui('#citysPop').popover('toggle');
		})
		$("#specialCity2").on('click', function() {
			cityFlag = 'specialCity2'
			mui('#citysPop').popover('toggle');
		})
		// 价格星级数据
		var priceStarsArr = []
		var price = ''
		$(".city-item").on('click', function() {
			let value = $(this).text()
			console.log(value, cityFlag);
			switch (cityFlag) {
				case 'city1':
					$("#city1").text(value)
					mui('#citysPop').popover('toggle');
					break;
				case 'positionHotelInput':
					$("#positionHotelInput").val(value)
					mui('#citysPop').popover('toggle');
					break;
				case 'priceStarsInput':
				console.log($(this).parent().attr('id'))
				let parentId=$(this).parent().attr('id')
					if(parentId == 'stars'){ //这里代表逻辑选中的星级逻辑
						if (priceStarsArr.length == 0 || !priceStarsArr.includes(value)) {
							priceStarsArr.push(value)
							$(this).addClass('city-item-active')
						}else if (priceStarsArr.includes(value)) {
							let indexToRemove = priceStarsArr.indexOf(value);
							priceStarsArr.splice(indexToRemove, 1);
							$(this).removeClass('city-item-active')
						}
					}else{//这里代表价格的逻辑
					$(this).siblings().removeClass('city-item-active')
					$(this).addClass('city-item-active')
					
					price = value
					}
					break;
				default:
					break;
			}
		})
		//价格星级弹窗按钮
		$("#popButton").on('click', function() {
			if (priceStarsArr.length>0) {
				let arr = priceStarsArr.join(',')+','+price;
				$('#priceStarsInput').val(arr)
			}else{
				$('#priceStarsInput').val(price)
			}
			$('.city-item').removeClass('city-item-active');
			priceStarsArr = [];
			price = ';'
			mui('#priceStarsPop').popover('toggle');
		})

		// 这块儿是搜索的赋值
		function searchChooseCity() {
			let city = $('#city').text()
			switch (cityFlag) {
				case 'city1':
					$("#city1").text(city)
					break;
				case 'positionHotelInput':
					$("#positionHotelInput").val(city)
					break;
				default:
					break;
			}
			mui('#citysSearchPop').popover('toggle');

		}

		function inputBlur() {
			mui('#citysPop').popover('toggle');
			// input框获取焦点事件
			setTimeout(function() {
				mui('#citysSearchPop').popover('toggle');
			}, 500);
		}

		function closeSearchPop() {
			mui('#citysSearchPop').popover('toggle');
			// input框获取焦点事件
			setTimeout(function() {
				mui('#citysPop').popover('toggle');
			}, 500);
		}

		function closePop() {
			mui('#citysPop').popover('toggle');
		}

		function closePriceStarsPop() {
			mui('#priceStarsPop').popover('toggle');
		}

		function inputSearch() {
			$('#searchArea').css('display', 'block')
			console.log('输入显示');
		};


		// 下面是时间选择
		// $('#date1').on('click', function() {
		// 	dateFlag = "date1"
		// 	showDataPicker()
		// })
		// $('#date2').on('click', function() {
		// 	dateFlag = "date2"
		// 	showDataPicker()
		// })

		function showDataPicker() {
			let option = {
				"type": "date",
				"beginYear": "2010",
				"endYear": "2050"
			};
			let picker = new mui.DtPicker(option);
			picker.show(function(rs) {
				console.log(rs.text)
				let date = rs.text.slice(5, 7) + "月" + rs.text.slice(8, 10) + "日"
				switch (dateFlag) {
					case 'date1':
						$("#date1").text(date)
						break;
					case 'date2':
						$("#date2").text(date)
						break;
					default:
						break;
				}
			});
		};
		// 查询酒店按钮
		$('#button1').on('click', function() {
			mui.openWindow("bookingList.html", "ID");
			console.log('限时秒杀');
		})
	</script>
</html>
<!--  -->
